<template>
  <div class="menu-box">
    <div class="body-list">
      <div class="menu-box-top">
        <p v-for="(item, index) in dataArr" :key="index">{{item}}</p>
      </div>
      <div class="menu-box-cen">
        <p>升级vip,享受八大权益</p>
        <div>升级</div>
      </div>

      <div class="menu-box-btm">
        <p v-for="(item, index) in dataArr1" :key="index">{{item}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "set",
  data() {
    return {
      dataArr:[
        '个人中心',
        '我的简历',
        '我的钱包',
        '我的收藏',
        '账号与安全中心',
        '求职管理'
      ],
      dataArr1:[
        '账号管理',
        '账号注销',
        '退出账号',
        
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.menu-box {
  display: flex;
  align-items: center;
  height: 100%;
  .body-list {
    width: 90%;
    height: 100%;
    margin: auto;
    .menu-box-top{
      width: 100%;
      color: #464646;
      display: flex;
      flex-direction: column;
      p{
        width: 85%;
        height: 20px;
        // margin: auto;
        margin-top: 10px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 600;
      }
      p:hover{
        color: #4098F8;
      }
    }
    .menu-box-cen {
      display: flex;
      height: 40px;
      line-height: 40px;
      border-radius: 10px;
      background-color: #3291f8;
      padding-left: 10px;
      margin-top: 10px;
      font-size: 12px;
      div{
        width: 30px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        font-size: 10px;
        border: 1px solid #F68E8E;
        background-color: #FEEEEE;
        margin: auto;
        color: #F26161;
      }
    }
    .menu-box-btm{
      width: 100%;
      color: #464646;
      display: flex;
      flex-direction: column;
      p{
        width: 85%;
        height: 20px;
        // margin: auto;
        margin-top: 10px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 600;
      }
      p:hover{
        color: #4098F8;
      }
    }
  }
}
</style>
